<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		ul{
			display: flex;
			flex-wrap: wrap;
			width: 1980px;
		}
		li{
			list-style: none;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: brown;
			color: #fff;
			text-align: center;
			line-height: 50px;
			margin: 10px;
		}
		button{
			background-color: blue;
			color: #fff;
			padding: 10px;
			border: none;
			margin: 10px;
			border-radius: 5px;
		}
		.list-move{
			transition: .5s;
		}
		.list-enter-from{
			transform: translateY(-100px);
		}
		.list-enter-active,.list-leave-active{
			transition: .5s;
		}
		.list-leave-to{
			transform: scale(0);
			opacity: 0;
		}
	</style>
	<body>
		<div id="app">
			<button @click="order(1)">升序</button>
			<button @click="order(2)">降序</button>
			<button @click="order(3)">乱序</button>
			<button @click="add(1)">添加到第一个</button>
			<button @click="add(2)">添加到末尾</button>
			<button @click="del(1)">删除第一个</button>
			<button @click="del(2)">删除最后一个</button>
			<button @click="del(0,0)">删除前3个</button>
			<button @click="list.splice(list.length-1,0,999)">添加到倒数第二个</button>
			<ul>
				<li v-for="item in list">{{item}}</li>
			</ul>
			<hr />
			过渡
			<transition-group tag="ul" name="list">
				<li v-for="item in list" :key="item">{{item}}</li>
			</transition-group>
		</div>
		<script>
			Vue.createApp({
				data(){
					return{
						list:[1,2,3,4,5,6,7,8,9],
						max:9
					}
				},
				methods:{
					order(type){
						if(type==2){
							this.list.sort((a,b)=>b-a)
						}else if(type==1){
							this.list.sort((a,b)=>a-b)
						}else{
							this.list.sort(()=>Math.random()-0.5)
						}
					},
					add(type){
						this.max++
						var i=this.list.length+1
						if(type==1){
							this.list.unshift(this.max)
						}else{
							this.list.push(this.max)
						}
					},
					del(type,i){
						if(type==1){
							this.list.shift()
						}
						else if(type==2){
							this.list.pop()
						}else{
							this.list.splice(i,2)
						}
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>